<template>
  <u-popup v-if="show" v-model="show" mode="center" :mask="true" @close="bindClose()">
    <div class="preview-content">
      <div class="title">作品预览</div>
      <div class="wrap-content">
        <!--        <u-swiper :list="list" :height="658" :autoplay="false"></u-swiper>-->
        <wd-swiper v-model:current="current" :autoplay="false" :height="329" :indicator="{ type: 'dots-bar' }" :list="list" text-key="title" value-key="url"></wd-swiper>
      </div>
      <div class="btns">
        <div class="btn" @click="bindClose()">取消</div>
        <div class="btn save-btn" @click="saveGoodCanvas()">保存</div>
      </div>
    </div>
  </u-popup>
</template>

<script setup lang="ts">
import { ref, shallowRef, toRaw } from 'vue';
import { useDesignerGoodState } from '@/state/modules/DesignerGoodState';

const list = shallowRef<any[]>([
  // {
  //   image: 'https://cdn.uviewpro.cn/uview/xxx.png',
  //   title: '昨夜星辰昨夜风，画楼西畔桂堂东',
  // },
]);
const useDesignerGood = useDesignerGoodState();

const show = ref(false);
const open = async () => {
  // console.log('预览', useDesignerGood.towardPositionArr);
  await uni.showLoading({ title: '加载中...' });
  const arr = [];
  for (let i = 0; i < useDesignerGood.towardPositionArr.length; i++) {
    const item = toRaw(useDesignerGood.towardPositionArr)[i];
    arr.push({
      url: await item.AICanvas?.toImageData(),
      title: item.name,
    });
  }
  console.log({ arr });
  list.value = arr;
  uni.hideLoading();
  // list.value = toRaw(useDesignerGood.towardPositionArr)?.map((item) => {
  //   // console.log( item.AICanvas)
  //   return {
  //     url: item.AICanvas?.toImageData(),
  //     title: item.name,
  //   };
  // });
  console.log(list.value, '预览图片');
  show.value = true;
};
const bindClose = () => {
  show.value = false;
};

const emit = defineEmits(['save']);

const saveGoodCanvas = () =>{
  emit('save')
  bindClose();
}

defineExpose({
  open,
});
</script>
<style scoped lang="scss">
.preview-content {
  width: 648rpx;
  height: 908rpx;
  background: #ffffff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  padding: 32rpx;
  .title {
    width: 132rpx;
    height: 42rpx;
    font-weight: bold;
    font-size: 32rpx;
    color: #222222;
    line-height: 42rpx;
    text-align: center;
    margin: 0 auto;
  }
  .wrap-content {
    padding: 24rpx 16rpx 48rpx;
  }
  .btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .btn {
      width: 284rpx;
      height: 72rpx;
      background: #f3f7f8;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #6f6f6f;
      line-height: 72rpx;
      text-align: center;
      &.save-btn {
        background: linear-gradient(90deg, #f32f1a 0%, #f68a2d 100%);
        color: #ffffff;
      }
    }
  }
}
.wrap {
  padding: 40rpx;
  background: red;
}
.wrap-content :deep(.u-swiper-image) {
  height: 658rpx;
}
</style>
<style scoped>
.wrap-content :deep(.u-swiper-image) {
  border: 1px solid blue;
}
</style>
